<template>
    <editor v-model="textContent" :init="init"></editor>
  </template>
  
  <script setup>
  import tinymce from 'tinymce/tinymce'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver/theme' // 主题
  import 'tinymce/icons/default'
  import 'tinymce/models/dom' // Bug修复
  // tinymce插件可按自己的需要进行导入
  import 'tinymce/plugins/image' // 插入上传图片插件
  import "tinymce/plugins/importcss"; //图片工具
  import 'tinymce/plugins/media' // 插入视频插件
  import 'tinymce/plugins/table' // 插入表格插件
  import 'tinymce/plugins/lists' // 列表插件
  import "tinymce/plugins/charmap"; // 特殊字符
  import 'tinymce/plugins/wordcount' // 字数统计插件
  import "tinymce/plugins/codesample"; // 插入代码
  import "tinymce/plugins/code"; // 查看源码
  import "tinymce/plugins/fullscreen"; //全屏
  import 'tinymce/plugins/link' //
  import 'tinymce/plugins/preview' // 预览
  import "tinymce/plugins/template"; //插入模板
  import 'tinymce/plugins/save' // 保存
  import "tinymce/plugins/searchreplace"; //查询替换
  import "tinymce/plugins/pagebreak"; //分页
  import "tinymce/plugins/insertdatetime"; //时间插入
  
  import { reactive, ref, watch, onMounted } from "vue"
  
  const emit = defineEmits(["onDataEvent"])
  
  const props = defineProps({
    value: {
      type: String,
      default: ''
    },
    plugins: {
      type: [String, Array],
      default: 'lists image media table wordcount save preview'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo | formatselect | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | lists image media table | codesample code removeformat save preview'
    }
  })
//   样式
  const init = reactive({
    width: '100%',
    height: 500,
    language_url: '/tinymce/langs/zh-Hans.js',
    language: 'zh-Hans',
    skin_url: '/tinymce/skins/ui/oxide',
    plugins: props.plugins,
    toolbar: props.toolbar,
    content_css: '/tinymce/skins/content/default/content.css',
    branding: false,
    menubar: false,
    statusbar: true,
    init_instance_callback: (editor) => {
      console.log("初始化完成:", editor)
    },
    images_upload_handler: (blobInfo, success, failure) => {
      const img = 'data:image/jpeg;base64,' + blobInfo.base64()
      console.log("图片上传处理:", img)
      success(img)
    }
  })
  
  const textContent = ref("")
  
  watch(props.value, (newValue, oldValue) => {
    textContent.value = newValue
  })
  
  watch(textContent, (newValue, oldValue) => {
    emit("onDataEvent", newValue)
  })
  
  onMounted(() => {
    // 初始化 tinymce
    tinymce.init({})
  })
  </script>